}<html>
<head>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" %>
<%@ page import="funciones.prueba"%>
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.Iterator" %>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link href="css/stilo.css" rel="stylesheet" type="text/css" media="screen" />
		<link href="css/start/jquery-ui-1.8.17.custom.css" rel="stylesheet" type="text/css" media="screen" />
		<script type="text/javascript" src="lib/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="lib/jquery-ui-1.8.17.custom.min.js"></script>
		<script type="text/javascript" src="lib/system.js"></script>  
    </head>
    <body>
	<script>
	
	var listado;
	
	
	//esta variable me permite saber si lo ingresado es algo de lo nuevo, de lo
	//contrario pues vuelve todo a la normalidad
	var booleano=false;
	var veamos;
	
	
	//valida si el elemento es nuevo, para dar la opción de crearlo
		
	
	//autocomplete
	$(function() {
		
		
		$( "#dialogo" ).dialog({
			autoOpen: false,
			title: 'Crear un nuevo producto',
			resizable: false,
			modal: true,
			buttons: {
				"¿Desea crearlo?": function() {
// 					listado.push("Nuevo producto");
// 					$( "#tags" ).autocomplete({ source: listado });
					$( this ).dialog( "close" );
				},
				Cancel: function() {
					$( this ).dialog( "close" );
				}
			}
		});
		
		listado= [
		<% 
			prueba p=new prueba();
			out.println(p.GetLista());
		%>
		 ];
				
		$( "#tags" ).autocomplete({
			source: listado			 
		});
		
		//evento para tomar lo seleccionado
		$( "#tags" ).bind( "autocompleteselect", function(event, ui) {
			validar();
		});
	
	    var oneEventFired = false;
		var boo=false;
		$( "#tags" )
		.keydown(function(e) {
        if (!oneEventFired) {
	            if (e.keyCode === 13){
	            	var variable=$.trim($(this).val());
	    			if(variable.length>0&&!contains(listado,variable)){
	    				boo=true;
// 	            		document.getElementById('panel_d').style.visibility="hidden";
// 	            		document.getElementById('tags').value=variable;
	            		//$("#dialogo").dialog("open");
	    		    	 $("#dialogo").dialog("open");
	            	}
	            }
	        } else {
	        	oneEventFired = false;
	        }
	 	})
	 	.blur(function(e) {
	 		if(boo)//presiono enter
	 		{
	 			boo=false;
	 			return;
	 		}
	 		var variable=$.trim($(this).val());
	 		if(variable.length>0&&!contains(listado,variable)){
        		document.getElementById('panel_d').style.visibility="hidden";
        		document.getElementById('tags').value=variable;
        		$("#dialogo").dialog("open");
        	}
	    })
	 	;
		
		
	});
	
	
	function contains(arr, obj) {
	    for(var i=0; i<arr.length; i++) {
	        if (arr[i] == obj) return true;
	    }
	}

	
	function validar(){
		//primero se carga lo que tenemos
		document.getElementById('panel_d').style.visibility="visible";
		var seleccionado=document.getElementById('tags').value;
//		document.getElementById('codigo').value=seleccionado.substring(0,4);
		document.getElementById('nombre').value=seleccionado.substring(5,seleccionado.length);
	
		//aca cargamos la información que nos es útil para poder registrar la unidad y lo demás
		
	}
	
	
	//date picker
	$(function() {
		$( "#datepicker" ).datepicker();
	});
	
	</script>

	<div id="contenedor_encabezado">
	<div class="ui-widget">
	<label for="producto">ELIJA UN PRODUCTO: </label>
	<input id="tags" size="50" />
	<!--  --><input type="submit" value="Buscar" /> 
	
	
	<div id="dialogo">Este elemento no existe, desea crearlo???</div>
	<br>
	<br>
	<br>
			<div id="panel_d" style=visibility:hidden>
			<!-- 	<label for="lcodigo">CODIGO (CDX): </label><input id="codigo" readonly="readonly" />
			 -->
			<label for="lnombre">NOMBRE: </label><input id="nombre" readonly="readonly" size="40" />
			<p>FECHA: <input type="text" id="datepicker"></p>	
			</div>
	</div>
	</div>
    </body>
 </html>